<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.min-2.6.11.js"></script>
    <style>
        .bgc {
            background-color: skyblue;
        }

        .thin {
            font-weight: 200;
        }

        .color {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 原始设置 -->
        <h1 class="bgc thin">这是一个 h1 标签</h1>

        <!-- 通过 v-bind: 这种方式设置 -->
        <!-- <h1 v-bind:class="['bgc', 'thin']"> 通过 v-bind: 这种方式设置</h1> -->

        <!-- 
            通过 v-bind:class 设置 类名：
            v-bind:class="['样式名1', '样式名2', data属性 ? '样式名3' : '样式名4' ]"
            方括号中 样式名 使用 单引号 引起来， data属性名 不用单引号引起来
         -->
        <!-- <h1 v-bind:class="['bgc', 'thin', flage ? 'color' : '']"> 通过 v-bind: 这种方式设置</h1> -->

        <!-- 将上面的 三元运算 表达式换成 对象形式 -->
        <!-- <h1 v-bind:class="['bgc', 'thin', {'color': flage}]"> 通过 v-bind: 这种方式设置</h1> -->

        <!-- objStyle: [{bgc: true},{thin: false},{color: false}] -->
        <!-- <h1 v-bind:class="objStyle"> 通过 v-bind: 这种方式设置</h1> -->

        <h1 v-bind:class="objStyle1"> 通过 v-bind: 这种方式设置</h1>
        <h1 :class="objStyle1"> 通过 v-bind: 这种方式设置</h1>

        <!-- 
            通过设置 class 来显示不同的 样式
            class 可以 设置成一个 对象， 对象的属性就是 style标签里面的 类名 一一对应
         -->
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                flage: false,
                objStyle1: {
                    bgc: true,
                    thin: true,
                    color: true
                }
            }
        })
    </script>
</body>

</html>